<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>moo</title>
	<style type="text/css" media="screen">
			*{
				margin: 0px;
				padding: 0px;
			}
			body{
				font-family: Verdana, Sans;
				font-size: 12px;
			}
			table{
				width: 400px;
			}
			a, h1{
				font-weight: bold;
			}
			a{
				color: #429400;
			}
			h1{
				color: #e0e0e0;
			}
			img{
				border: 0px;
			}
			.dragTD{
				background: #333;
			}
			.dragHandle{
				cursor: pointer;
				background: url('http://niceproduce.com/lynt/moo/iconDragDrop.gif') no-repeat top left;
				height: 43px;
				width: 44px;
			}
			.arrowImageRight, .arrowImageDown{
				margin-top: 2px;
				cursor: pointer;
				float: right;
			}
			.arrowImageRight{
				background: url('http://niceproduce.com/lynt/moo/spilldownRight.gif') no-repeat;
				height: 9px;
				width: 5px;
			}
			.arrowImageDown{
				margin-top: 3px;
				background: url('http://niceproduce.com/lynt/moo/spilldownDown.gif') no-repeat;
				height: 5px;
				width: 9px;
			}.
			.content{
				background: #eee
			}
			.information{
				padding: 10px;
				font-face: Arial;
			}
			.White, .Grey{
				border: 1px black solid;
				padding: 5px;
			}
			.White{
				border-top: 0px;
				background: #fff;
			}
			.Grey{
				background: #e0e0e0;
				border-top: 0px;
			}
	</style>
	<style type="text/css">
ul#order {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 600px;

}
ul#order li {
	float:left;
}
.handle {
	width:200px;
	background-color: #eee;
	margin: 0;
	padding: 10px 0;
	cursor: move;
}
#s1 {background-color: #FF0000}
#s2 {background-color: #00CC00}
#s3 {background-color: #0033FF}
#s4 {background-color: #9933FF}
#s5 {background-color: #FFFF00}
#s6 {background-color: #FF6600}
</style>


</head>
<body>
	<div style="padding: 20px;">
		<div style="margin-bottom: 40px;">
			<h1>Made with</h1>
			<a href="http://mootools.net"><img src="http://mootools.net/assets/images/mootools.gif" /></a>
		</div>
		<div id="sortableList" style="width: 600px;">
			<div class="sort">
				<table cellspacing="0">
					<tr>
						<td class="content">
							<div class="box_title">
								<div class="arrow_drop arrowImageRight"></div>
								<span class="chartNumber commonLeftFloat">#.</span>
								<strong>Section Title A</strong><br />Section Subtitle
								<div style="clear: both;"></div>

								<div class="information">
									<a href="#">Link</a><br />
									<a href="#">Another Link</a>
									<br /><br />
									Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris mi leo, porttitor i...
									<br /><br />
									<a href="#">More Links</a><br />
									<a href="#">Even More Links</a>

								</div>
							</div>
						</td>
						<td class="dragTD" valign="top"><div class="dragHandle"></div></td>
					</tr>
				</table>
			</div>
			<div class="sort">
				<table cellspacing="0">

					<tr>
						<td class="content">
							<div class="box_title">
								<div class="arrow_drop arrowImageRight"></div>
								<span class="chartNumber commonLeftFloat">#.</span>
								<strong>Section Title B</strong><br />Section Subtitle
								<div style="clear: both;"></div>
								<div class="information">

									<a href="#">Link</a><br />
									<a href="#">Another Link</a><br />
									<br /><br />
									Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris mi leo, porttitor i...
									<br /><br />
									<a href="#">More Links</a><br />
									<a href="#">Even More Links</a>

								</div>
							</div>
						</td>
						<td class="dragTD" valign="top"><div class="dragHandle"></div></td>
					</tr>
				</table>
			</div>
			<div class="sort">
				<table cellspacing="0">

					<tr>
						<td class="content">
							<div class="box_title">
								<div class="arrow_drop arrowImageRight"></div>
								<span class="chartNumber commonLeftFloat">#.</span>
								<strong>Section Title C</strong><br />Section Subtitle
								<div style="clear: both;"></div>
									<div class="information">

									<a href="#">Link</a><br />
									<a href="#">Another Link</a><br />
									<br /><br />
									Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris mi leo, porttitor i...
									<br /><br />
									<a href="#">More Links</a><br />
									<a href="#">Even More Links</a>

								</div>
							</div>
						</td>
						<td class="dragTD" valign="top"><div class="dragHandle"></div></td>
					</tr>
				</table>
			</div>
			<div class="sort">
				<table cellspacing="0">

					<tr>
						<td class="content">
							<div class="box_title">
								<div class="arrow_drop arrowImageRight"></div>
								<span class="chartNumber commonLeftFloat">#.</span>
								<strong>Section Title D</strong><br />Section Subtitle
								<div style="clear: both;"></div>
								<div class="information">

									<a href="#">Link</a><br />
									<a href="#">Another Link</a><br />
									<br /><br />
									Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris mi leo, porttitor i...
									<br /><br />
									<a href="#">More Links</a><br />
									<a href="#">Even More Links</a>

								</div>
							</div>
						</td>
						<td class="dragTD" valign="top"><div class="dragHandle"></div></td>
					</tr>
				</table>
			</div>
			<div class="sort">
				<table cellspacing="0">

					<tr>
						<td class="content">
							<div class="box_title">
								<div class="arrow_drop arrowImageRight"></div>
								<span class="chartNumber commonLeftFloat">#.</span>
								<strong>Section Title E</strong><br />Section Subtitle
								<div style="clear: both;"></div>
								<div class="information">

									<a href="#">Link</a><br />
									<a href="#">Another Link</a><br />
									<br /><br />
									Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris mi leo, porttitor i...
									<br /><br />
									<a href="#">More Links</a><br />
									<a href="#">Even More Links</a>

								</div>
							</div>
						</td>
						<td class="dragTD" valign="top"><div class="dragHandle"></div></td>
					</tr>
				</table>
			</div>
			<div class="sort">
				<table cellspacing="0">

					<tr>
						<td class="content">
							<div class="box_title">
								<div class="arrow_drop arrowImageRight"></div>
								<span class="chartNumber commonLeftFloat">#.</span>
								<strong>Section Title F</strong><br />Section Subtitle
								<div style="clear: both;"></div>
								<div class="information">

									<a href="#">Link</a><br />
									<a href="#">Another Link</a><br />
									<br /><br />
									Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris mi leo, porttitor i...
									<br /><br />
									<a href="#">More Links</a><br />
									<a href="#">Even More Links</a>

								</div>
							</div>
						</td>
						<td class="dragTD" valign="top"><div class="dragHandle"></div></td>
					</tr>
				</table>
			</div>
			<div class="sort">
				<table cellspacing="0">

					<tr>
						<td class="content">
							<div class="box_title">
								<div class="arrow_drop arrowImageRight"></div>
								<span class="chartNumber commonLeftFloat">#.</span>
								<strong>Section Title G</strong><br />Section Subtitle
								<div style="clear: both;"></div>
								<div class="information">

									<a href="#">Link</a><br />
									<a href="#">Another Link</a><br />
									<br /><br />
									Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris mi leo, porttitor i...
									<br /><br />
									<a href="#">More Links</a><br />
									<a href="#">Even More Links</a>

								</div>
							</div>
						</td>
						<td class="dragTD" valign="top"><div class="dragHandle"></div></td>
					</tr>
				</table>
			</div>
			<div class="sort">
				<table cellspacing="0">

					<tr>
						<td class="content">
							<div class="box_title">
								<div class="arrow_drop arrowImageRight"></div>
								<span class="chartNumber commonLeftFloat">#.</span>
								<strong>Section Title H</strong><br />Section Subtitle
								<div style="clear: both;"></div>
								<div class="information">

									<a href="#">Link</a><br />
									<a href="#">Another Link</a><br />
									<br /><br />
									Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris mi leo, porttitor i...
									<br /><br />
									<a href="#">More Links</a><br />
									<a href="#">Even More Links</a>

								</div>
							</div>
						</td>
						<td class="dragTD" valign="top"><div class="dragHandle"></div></td>
					</tr>
				</table>
			</div>
		</div>
	</div>
<ul id="order">
<li id="s1" class="handle">s1</li>
<li id="s2" class="handle">s2</li>
<li id="s3" class="handle">s3</li>
<li id="s4" class="handle">s4</li>
<li id="s5" class="handle">s5</li>
<li id="s6" class="handle">s6</li>
</ul>

<div id="SortableExample">
 
	<ul><li id="item_1">
	<div id="paragraph1">
	<table width="150" border="1">
	  <tr>
		<td>This is item one content</td>
	    <td>Click to move </td>
	  </tr>
	</table>
	</div>
	</li></ul>
 
	<ul><li id="item_2">
	<div id="paragraph2">
	<table width="150" border="1">
	  <tr>
		<td>This is item two content</td>
	  </tr>
	</table>
	</div>	</li></ul>
 
	<ul><li id="item_3">
	<div id="paragraph3">
	<table width="150" border="1">
	  <tr>
		<td>This is item three content</td>
	  </tr>
	</table>
	</div></li></ul>
 
</div>
</body>
</html>